<template>
  <div class="app-container">
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="add" size="small">添加预约</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        align="center"
        prop="customerName"
        label="患者姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="recordNo"
        align="center"
        label="病历号">
      </el-table-column>
      <el-table-column
        align="center"
        prop="visit"
        label="就诊类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="type"
        label="预约类型">
      </el-table-column>
      <el-table-column
        align="center"
        prop="time"
        label="预约时间"
      width="140">
      </el-table-column>
      <el-table-column
        align="center"
        prop="sustain"
        width="120"
        label="持续时间(分钟)">
      </el-table-column>
      <el-table-column
        align="center"
        prop="projectName"
        width="180"
        label="预约项目">
      </el-table-column>
      <el-table-column
        align="center"
        prop="doctorName"
        label="初诊医生">
      </el-table-column>
      <el-table-column
        align="center"
        prop="stateName"
        label="预约状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state==1" v-text="scope.row.stateName"></el-tag>
          <el-tag type="success" v-if="scope.row.state==2" v-text="scope.row.stateName"></el-tag>
          <el-tag type="info" v-if="scope.row.state==3" v-text="scope.row.stateName"></el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        width="160"
        label="创建时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button  type="text"  v-if="scope.row.state==1"  @click="affirm('该患者是否到店请确认, 是否继续?',scope.row.id,2)" >确认</el-button>
          <el-button  type="text"  v-if="scope.row.state==1"  @click="affirm('是否取消该预约信息',scope.row.id,3)"  >取消</el-button>
        </template>
      </el-table-column>
    </el-table>


     <el-drawer
      title="预约信息"
      :append-to-body="true"
      :destroy-on-close="true"
      :visible.sync="drawer">
      <Info :day="day" @cancel="cancel"  />
    </el-drawer>
  </div>
</template>

<script>
import Info from '@/views/dashboard/admin/components/Info'
import { post } from '@/api/requestCommon'
import { fail, showAttribute, success } from '@/api/common'
export default {
  name: 'Reservation',
  components:{
    Info
  },
  props:{
    day: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      tableData:[],
      type:'Reservation',
      loading: false,
      drawer: false,
      form:{day: this.day}
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      post('subscribe/findList',this.form).then(response=>{
        showAttribute(response,this,'tableData')
      })
    },
    add(){
      this.drawer= true
    },
    cancel(){
      this.drawer=false
      this.loadData()
    },
    affirm(title,id,state){
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         post('subscribe/updateSubscribeState',{id:id,state:state}).then(response=>{
           if(response.code===200){
             success(response.msg);
             this.loadData()
           }else{
             fail(response.msg);
           }
         })
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="scss">
.el-drawer.rtl{
  overflow: scroll;
}
</style>
